<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<base href="<%=basePath%>">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

	<script type="text/javascript">

		//默认情况下取消和保存按钮是隐藏的
		var cancelAndSaveBtnDefault = true;

		$(function(){
			$("#remark").focus(function(){
				if(cancelAndSaveBtnDefault){
					//设置remarkDiv的高度为130px
					$("#remarkDiv").css("height","130px");
					//显示
					$("#cancelAndSaveBtn").show("2000");
					cancelAndSaveBtnDefault = false;
				}
			});

			$("#cancelBtn").click(function(){
				//显示
				$("#cancelAndSaveBtn").hide();
				//设置remarkDiv的高度为130px
				$("#remarkDiv").css("height","90px");
				cancelAndSaveBtnDefault = true;
			});

			$('#activityRemarkDiv').on('mouseover','.remarkDiv',function () {
				$(this).children("div").children("div").show();
			});

			$('#activityRemarkDiv').on('mouseout','.remarkDiv',function () {
				$(this).children("div").children("div").hide();
			});

			$('#activityRemarkDiv').on('mouseover','.myHref',function () {
				$(this).children("span").css("color","red");
			});

			$('#activityRemarkDiv').on('mouseout','.myHref',function(){
				$(this).children("span").css("color","#E6E6E6");
			});

			/*$(".remarkDiv").mouseover(function(){
				$(this).children("div").children("div").show();
			});*/

			/*$(".remarkDiv").mouseout(function(){
				$(this).children("div").children("div").hide();
			});*/

			/*$(".myHref").mouseover(function(){
				$(this).children("span").css("color","red");
			});*/

			/*$(".myHref").mouseout(function(){
				$(this).children("span").css("color","#E6E6E6");
			});*/

			$('#saveCreateActivityRemarkBtn').click(function(){
				var remark = $('#remark').val();
				var activityId = $('#activityId').val();


				if(remark==null||remark==''){
					alert('内容不能为空');
					return;
				}

				$.ajax({
					url:'workbench/activity/saveCreateActivityRemark.do',
					data:{
						remark:remark,
						activityId:activityId
					},
					dataType:'json',
					type:'post',
					success:function(res){
						if(res.code=='0'){
							alert(res.message);
						}else if(res.code=='1'){
							//刷新
							$('#remark').val('');

							var htmlStr = '';

							var activityName = $('#activityName').html();

							htmlStr += '<div class="remarkDiv" id="div_' + res.retData.id + '" style="height: 60px;">';
							htmlStr += '<img title="' + res.retData.createBy + '" src="image/user-thumbnail.png" style="width: 30px; height:30px;">';
							htmlStr += '<div style="position: relative; top: -40px; left: 40px;" >';
							htmlStr += '<h5 id="h5_' + res.retData.id + '">' + res.retData.noteContent + '</h5>';
							var time = res.retData.editFlag=='1'?res.retData.editTime:res.retData.createTime;
							var by = res.retData.editFlag=='1'?res.retData.editBy:res.retData.createBy;
							htmlStr += '<font color="gray">市场活动</font> <font color="gray">-</font> <b>' + activityName + '</b> <small style="color: gray;" id="small_' + res.retData.id + '">'+ time + ' 由' + by + '</small>';
							htmlStr += '<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
							htmlStr += '<a class="myHref" name="editA" remarkId="' + res.retData.id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #e6e6e6;"></span></a>';
							htmlStr += '&nbsp;&nbsp;&nbsp;&nbsp;';
							htmlStr += '<a class="myHref" name="deleteA" remarkId="' + res.retData.id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>';
							htmlStr += '</div>';
							htmlStr += '</div>';
							htmlStr += '</div>';

							$('#activityRemarkDiv').append(htmlStr);
						}
					}
				});
			});

			$('#activityRemarkDiv').on('click','a[name="deleteA"]',function(){
				var id = $(this).attr('remarkId');

				$.ajax({
					url:'workbench/activity/deleteActivityRemarkById.do',
					data:{
						id:id
					},
					dataType:'json',
					type:'post',
					success:function(res){
						if(res.code=='0'){
							alert(res.message);
						}else if(res.code=='1'){
							$('#div_'+id).remove();
						}
					}
				});
			});

			$('#activityRemarkDiv').on('click','a[name="editA"]',function(){
				$('#editRemarkModal').modal('show');
				var id = $(this).attr('remarkId');

				$('#editRemarkId').val(id);
				$('#noteContent').val($('#h5_'+id).html());
			});

			$('#updateRemarkBtn').click(function(){

				var id = $('#editRemarkId').val();
				var remark = $('#noteContent').val();

				$.ajax({
					url:'workbench/activity/updateActivityRemarkById.do',
					data:{
						id:id,
						remark:remark
					},
					dataType:'json',
					type:'post',
					success:function(res){
						if(res.code=='0'){
							alert(res.message);
							$('#editRemarkModal').modal('show');
						}else if(res.code=='1'){
							$('#h5_'+id).html(remark);
							$('#small_'+id).html(res.retData.editTime + '由' + res.retData.editBy);
							$('#editRemarkModal').modal('hide');
						}
					}
				});
			});
		});

	</script>

</head>
<body>

<!-- 修改市场活动备注的模态窗口 -->
<div class="modal fade" id="editRemarkModal" role="dialog">
	<%-- 备注的id --%>
	<input type="hidden" id="remarkId">
	<div class="modal-dialog" role="document" style="width: 40%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">修改备注</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="noteContent" class="col-sm-2 control-label">内容</label>
						<div class="col-sm-10" style="width: 81%;">
							<input type="hidden" id="editRemarkId">
							<textarea class="form-control" rows="3" id="noteContent"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="updateRemarkBtn">更新</button>
			</div>
		</div>
	</div>
</div>



<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
	<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
	<div class="page-header">
		<h3>市场活动-${requestScope.name} <small>${requestScope.startDate} ~ ${requestScope.endDate}</small></h3>
	</div>

</div>

<br/>
<br/>
<br/>

<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
	<div style="position: relative; left: 40px; height: 30px;">
		<input type="hidden" id="activityId" value="${requestScope.id}">
		<div style="width: 300px; color: gray;">所有者</div>
		<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.owner}</b></div>
		<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
		<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b id="activityName">${requestScope.name}</b></div>
		<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
		<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
	</div>

	<div style="position: relative; left: 40px; height: 30px; top: 10px;">
		<div style="width: 300px; color: gray;">开始日期</div>
		<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.startDate}</b></div>
		<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
		<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${requestScope.endDate}</b></div>
		<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
		<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
	</div>
	<div style="position: relative; left: 40px; height: 30px; top: 20px;">
		<div style="width: 300px; color: gray;">成本</div>
		<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.cost}</b></div>
		<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
	</div>
	<div style="position: relative; left: 40px; height: 30px; top: 30px;">
		<div style="width: 300px; color: gray;">创建者</div>
		<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.createBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${requestScope.createTime}</small></div>
		<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
	</div>
	<div style="position: relative; left: 40px; height: 30px; top: 40px;">
		<div style="width: 300px; color: gray;">修改者</div>
		<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.editBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${requestScope.editTime}</small></div>
		<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
	</div>
	<div style="position: relative; left: 40px; height: 30px; top: 50px;">
		<div style="width: 300px; color: gray;">描述</div>
		<div style="width: 630px;position: relative; left: 200px; top: -20px;">
			<b>
				${requestScope.description}
			</b>
		</div>
		<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
	</div>
</div>

<!-- 备注 -->
<div style="position: relative; top: 30px; left: 40px;">
	<div class="page-header">
		<h4>备注</h4>
	</div>

	<div id="activityRemarkDiv">
		<c:forEach items="${requestScope.activityRemarkList}" var="activityRemark">
			<div class="remarkDiv" id="div_${activityRemark.id}" style="height: 60px;">
				<img title="${activityRemark.createBy}" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
				<div style="position: relative; top: -40px; left: 40px;" >
					<h5 id="h5_${activityRemark.id}">${activityRemark.noteContent}</h5>
					<font color="gray">市场活动</font> <font color="gray">-</font> <b>${requestScope.name}</b> <small style="color: gray;" id="small_${activityRemark.id}">${activityRemark.editFlag=='1'?activityRemark.editTime:activityRemark.createTime} 由${activityRemark.editFlag=='1'?activityRemark.editBy:activityRemark.createBy}</small>
					<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
						<a class="myHref" name="editA" remarkId="${activityRemark.id}" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<a class="myHref" name="deleteA" remarkId="${activityRemark.id}" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
					</div>
				</div>
			</div>
		</c:forEach>
	</div>

	<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
		<form role="form" style="position: relative;top: 10px; left: 10px;">
			<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
			<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
				<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
				<button type="button" class="btn btn-primary" id="saveCreateActivityRemarkBtn">保存</button>
			</p>
		</form>
	</div>
</div>
<div style="height: 200px;"></div>
</body>
</html>